/* 二级路由 */

// 样式私有化处理  styled-components
import React from "react";
import styled from "styled-components";
import {CommonListBox, titleSize, colorRed} from "./common"
import {HashRouter, Route, Switch, Redirect, Link} from "react-router-dom";
import A1 from "./a/A1"
import A2 from "./a/A2"
import A3 from "./a/A3"

/* 编写组件的样式： 基于 css-in-js 思想中的 styled-components 插件 */
const MenuBox = styled.div`
  display: flex;
  justify-content: space-between;
  background: lightblue;
  width: 400px;

  .title {
    font-size: ${titleSize}px;
    line-height: 40px;

    &:hover {
      color: ${colorRed}
    }
  }
`

class Menu extends React.Component {
    render() {
        return <MenuBox>
            <div>
                <Link to="/a/a1" className="title">手机a</Link>
                <Link to="/a/a2" className="title">电脑a</Link>
                <Link to="/a/a3" className="title">家电a</Link>
            </div>
            <div>
                {/*A1组件的详细详细信息*/}
                <Switch>
                    <Redirect exact from="/a" to="/a/a1"/>
                    <Route path="/a/a1" component={A1}/>
                    <Route path="/a/a2" component={A2}/>
                    <Route path="/a/a3" component={A3}/>
                </Switch>
            </div>
        </MenuBox>
    }
};


export default Menu;